// 可以使用这个组件捕获其它组件的错误



import { Component } from "react"


class ErrorBoundary extends Component<any, { error: string }> {
    state = {
        error: ''
    }

    //当子组件抛出异常，这里会接收到并且调用,并且派发一个新的状态

    static getDerivedStateFromError(error: any): { error: string } {
        console.log('----error', error)
        return {
            error: error.toString()
        }
    }

    //当子组件抛出异常，这里会接收到并且调用

    componentDidCatch(error: any, errorInfo: any) {
        console.log('----error', error)
        console.log('----errorInfo', errorInfo)

        //可以将错误信息上报给服务器
    }

    render() {
        if (this.state.error) {
            //展示错误的信息
            return <h2>{this.state.error}</h2>
        }

        return this.props.children
    }
}

export default ErrorBoundary